<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>在线客服</title>
    <link rel="stylesheet" href="__pc_static__/css/init.css">
    <link rel="stylesheet" href="__pc_static__/css/index.css">
</head>
<body>
<div id="chat">
    <div class="left user">
        <div class="top">
            <div class="chat_name">机械猫 喵喵~</div>
            <div>
                <img style="background-color: #fff;border:2px solid #fff" src="{if condition="$is_kf eq 1"}{$kfPhotoOnLine}{else}{$userPhotoOnLine}{/if}" class="user_photo left">
                <span class="left user_name">{$mine.nickname}</span>
                <span class="left user_rank">普通</span>
                <div class="clearfix"></div>
            </div>
        </div>
        <dl class="kf_list">
            {foreach name="client_user" item="user" key='key'}
            <dd onclick="javascript:KF.change(this)" {if condition="$key eq 0"}class="current"{/if} venderid="{$user.client_id}" is_kf="{if condition="$user.is_kf eq 1"}1{else}0{/if}">
            <img style="background-color: #fff;border:4px solid #fff;" src="{if condition="$user.is_kf == 1 && $user.lineStateNum == 1"}{$kfPhotoOnLine}{elseif condition="$user.is_kf == 1 && $user.lineStateNum == 0"}{$kfPhotoOffLine}{elseif condition="$user.lineStateNum == 1"}{$userPhotoOnLine}{else}{$userPhotoOffLine}{/if}" class="left clientPhoto">
            <span class="left kf_name"><label>{$user.nickname}</label><em> {$user.lineState}</em></span><span class="tipsbox "></span><div class="clearfix"></div></dd>
            {/foreach}
        </dl>
    </div>
    <div id="main-content" class=" left">
        {if condition="$is_kf eq 1"}
        <div class="editUser" >
            <div onclick="javascript:UserInfo.showElist();">更多操作 <span class="pulldown"></span></div>
            <div class="elist">
                <dl>
                    <dd onclick="javascript:UserInfo.showUserInfoForm('{:url("UserInfo/info")}');">用户备注</dd>
                    <dd onclick="javascript:UserInfo.getTrace('{:url("index/getTrace")}');">追踪信息</dd>
                    <dd onclick="javascript:UserInfo.banUser('{:url("index/banIp")}');">封禁用户</dd>
                </dl>
            </div>
        </div>
        {/if}
    {foreach name="client_user" item="user" key='key'}
        <div class="left chat_box {if condition="$key eq 0"}current{/if}" venderid="{$user.client_id}">
            <div class="kf_name"><span>{if condition="$user.is_kf == 1"}客服{else}用户{/if}</span> {$user.nickname}<em> {$user.lineState}</em></div>
            <div class="kf_msg" >
                <div class="loadMsg" onclick="javascript:KF.getLateMsg(this)" msgid="">{if $user.no_skim > 0}您有<span style="color: red">{$user.no_skim}条留言</span>未查看，{/if}点击加载更多消息</div>
            </div>
        </div>
        {/foreach}
    <!--编辑器-->
    <div class="textarea left" >
                <div id="container" name="content" ></div>
                {if condition="$mine.is_kf == 1"}
                <span class="switch_kf" onclick="javascript:KF.showKFBox(1)">切换客服</span>
                {/if}
        <!--满意度评价-->
            {if condition="$is_kf neq 1"}
                <span class="satify"  >
                    <div onclick="javascript:AssessStart.show()">
                        <img src="__static__/images/satify.png" > 满意度评价
                    </div>
                    <div id="assess">
                        <div class="close" onclick="javascript:AssessStart.show()">x</div>
                        <div class="title">请对此服务进行评价</div>
                        <div class="starSelect" >
                            <div class="star no_satify"></div>
                            <div class="star no_satify"></div>
                            <div class="star no_satify"></div>
                            <div class="star no_satify"></div>
                            <div class="star no_satify"></div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="button"><span onclick="javascript:AssessStart.submit('{:url("Index/assess")}')">提交</span></div>
                </div>
                </span>
            {/if}
                <!--发送站内信-->
                <span class="send_mail_box">
                    {if condition="$is_kf neq 1"}
                    <span class="circle_box">
                        <em></em>
                        客服正忙着？点击尝试留言
                        <span class="close">x</span>
                    </span>
                    <a  href="#" onclick="javascript:window.open('{:url('Mail/index')}','leaveMsg','height=800,width=1100,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');"><img src="__static__/images/mail.png" class="mail"  alt="给客服妹妹留言" title="给客服妹妹留言"></a>
                    {/if}
                </span>
                <!--发送截图-->
                <span class="paste" style="cursor:pointer;">
                    <span class="circle_box">
                        <em class="right"></em>
                        使用qq,微信等其他工具截图后，点击切换模式，键盘同时按 ctrl和v键 就可以发了哦
                        <span class="close">x</span>
                    </span>
                    截图后切换发送模式
                </span>
                <!--发送图片-->
                <span class="upload_photo"><label>图片</label><input type="file" id="photo" name="photo" onchange="javascript:KF.send(this,'photo');"></span>
                <!--发送按钮-->
                <span class="submit" id="submit" onclick="javascript:KF.send(this,'text')">发送</span>
                <!--选择发送方式-->
                <span id="submitType" onclick="javascript:KF.show_post_type()"><em></em></span>
                <div id="submitTypeSelect"><div onclick="javascript:KF.set_post_type(1)">按Enter键发送消息，Ctrl+Enter换行</div><div  onclick="javascript:KF.set_post_type(2)">按Ctrl+Enter键发送消息，Enter换行</div></div>
                <input type="hidden" id="photo-input" value="">

        </div>
    </div>
    <div class="clearfix"></div>
</div>
<!--放大图片容器-->
<div id="skim-pic" onclick="javascript:KF.hide_big_photo()">
    <div class="bg"></div>
    <div class="content"><img src="" onload="javascript:img_adjust.init({target:this,fixed_width:980,fixed_height:600})"></div>
</div>

<!--裁剪图片容器-->
<div id="skim-pic-paste" >
    <div class="bg"></div>
    <div class="content">
        <img src="" onload="javascript:img_adjust.init({target:this,fixed_width:980,fixed_height:500})">
        <div class="btn"><span onclick="javascript:KF.send(this,'pastePhoto');">确认</span><span class="cancle">取消</span></div>
    </div>
</div>

{if condition="$mine.is_kf == 1"}
<!--切换客服 start-->
<div id="swtichKF">
    <div class="content">
        <div class="close"  onclick="javascript:KF.showKFBox(0)"></div>
        <dl></dl>
    </div>
</div>
<!--切换客服 end-->

<!--编辑用户信息表单-->
<div id="editUserInfo">
    <form id="editUserInfoForm">
        <div class="nav_title">备注用户的信息：</div>
        <dl>
            <dd><div class="title">名称：</div><input type="text" name="name"></dd>
            <dd><div class="title">联系方式：</div><input type="text" name="phone"></dd>
            <dd><div class="title">公司：</div><input type="text" name="company"></dd>
            <dd><div class="title">备注：</div><textarea name="remark"></textarea></dd>
            <dd><input type="button" value="确定" class="center" onclick="javascript:UserInfo.editUserInfo('{:url("UserInfo/edit")}');"></dd>
            <dd><input type="button" value="取消" class="cancle" onclick="javascript:UserInfo.showUserInfoForm();"></dd>
        </dl>
    </form>
</div>

<!--编辑用户信息表单-->
<!--用户痕迹列表-->
<div id="trace" userphoto="{$userPhotoOnLine}">
    <div class="box">
        <img src="__static__/images/guanbi.png" width="20" class="close" onclick="javascript:UserInfo.showTrace()">
        <div class="title">
            <img src="__static__/images/henji.png" width="80" class="henji">
            <div>查看当前用户痕迹</div>
        </div>
        <dl>
        </dl>
    </div>
</div>


{/if}

<!--加载进度条-->
<div id="loading">
    <img src="__static__/images/loading.gif" class="img">
</div>
<!--加载进度条-->

<div id="paste"></div>


</body>
</html>
<script src="__static__/js/jquery.min.js"></script>

<!--UE-->
<script type="text/javascript" src="__static__/UE/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__static__/UE/ueditor.all.js"></script>
<!--UE-->

<!--消息提示音-->
<audio id="chatAudio" controls="controls"  style="display: none" >
    <source src="__static__/mp3/chat.mp3"/>
</audio>
<!--消息提示音-->

<!--websocket-->
<script src="__static__/js/clipboar.js"></script>
<script src="__static__/js/fileupload.js"></script>
<script src="__static__/js/base64.js"></script>
<script src="__static__/js/ImgAdjust.js"></script>
<script src="__static__/js/kf_base.js"></script>
<script src="__static__/js/kf_msg_deal.js"></script>
<script src="__static__/js/UserInfoForm.js"></script>
<script src="__static__/js/AssessStart.js"></script>

<script>

    var ue = UE.getEditor('container',{
        wordCount           : false,
        elementPathEnabled  : false,
        enableAutoSave: false, //禁止自动保存
        autoSyncData: false,//自动同步编辑器要提交的数据
        saveInterval: 5000000,
        enableContextMenu   : false,
        pasteplain          : true,
        autoHeightEnabled: false,
        autoFloatEnabled: true,
        focus: true
    });

    var img_adjust = new IMG_ADJUST({});
    KF.init({
        domain_ip           : '{$domain_ip}',
        //客户端id绑定该用户
        url_bind_user    : '{:url("bind_user")}',
        //发送文本消息
        url_send_text    : '{:url("send_text")}',
        //发送图片
        url_send_photo   : '{:url("send_photo")}',
        //发送base64图片
        url_base_photo   : '{:url("send_base_photo")}',
        //加载历史记录
        url_loadMsg      : '{:url("getLateMsg")}',
        //客服列表
        url_kfList       : '{:url("kf/getList")}',
        //转换客服
        url_kfChange     : '{:url("kf/changeKf")}',
        //用户列表
        url_UserList     : '{:url("getLateUser")}',
        //点击问题进行自动回复
        url_autoReply    : '{:url("autoReply")}',
        KfLoginUrl : "{:url('Kf/login')}",
        //在线离线状态头像
        userPhotoOnLine : '{$userPhotoOnLine}',
        userPhotoOffLine : '{$userPhotoOffLine}',
        kfPhotoOnLine : '{$kfPhotoOnLine}',
        kfPhotoOffLine : '{$kfPhotoOffLine}',
        //编辑器ue对象
        UE               : ue,
        //客服名称
        kf_name          : $('.kf_list dd.current .kf_name label').html(),
        //默认发送的client_id
        send_client_id   : $('.kf_list dd.current').attr('venderid'),
        token            : '{$token}',
        photo_base_path  : '',
        newMsgTips : function(){$('#chatAudio')[0].play();},
    });


    $(function(){
        //如何粘贴图片？
        $('.paste').click(function(){
            showCircleBox(this);
            return false;
        });
        showCircleBox('.send_mail_box');
        $('.circle_box .close').click(function(){
            showCircleBox($(this).parents('.circle_box')[0]);
            return false;
        });
    });

    function showCircleBox(target)
    {
        if($(target).hasClass('circle_box'))
        {
            $(target).toggle();
        }
        else
        {
            $(target).find('.circle_box').toggle();
        }

    }

</script>